.log-container {
  display: flex;
  align-items: baseline;

  .log-prefix {
    flex-shrink: 0;
    color: var(--color-content);
  }

  .log-message {
    flex: 1 1 0%;
    border-radius: 7px;
    color: var(--color-content);
  }
}

%icon-mount-style {
  padding: 0.25rem 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

%icon-style {
  content: " ";
  display: block;
  width: 1rem;
  height: 1rem;
  background-size: cover;
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  // transform: translateY(100%);
}



.warning-container {
  color: orange;

  .warning-message {
    @extend %icon-mount-style;
    background:#ff9f0040;

    &::before {
      @extend %icon-style;
      background-image: url("icons/warning.png");
    }
  }
}


.success-container {
  color: green;

  .success-message {
    @extend %icon-mount-style;
    background:#7bff0040;

    &::before {
      @extend %icon-style;
      background-image: url("icons/success.png");
    }
  }
}


.error-container {
  color: crimson;

  .error-message {
    @extend %icon-mount-style;
    background:#ff000040;

    &::before {
      @extend %icon-style;
      background-image: url("icons/error.png");
    }
  }
}